// 退换货页面

import React, {Component} from 'react';

import {StatusBar, Text, View,Image, TouchableWithoutFeedback, ScrollView, TouchableOpacity, StyleSheet, TextInput} from 'react-native';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
import Modal from 'react-native-modalbox';


import CXIcon from '../../../style/icon/CXIcon';
import styles, {mainBackgroundColor, white} from "../../../style/global";


class returnPage extends Component {

    _showSearchModal() {
        console.log(444);
        this.refs.searchModal.open();
    }
    _showLeftSkuModal() {
        console.log(555);
        this.refs.leftSkuModal.open();
    }
    render() {
        return (
            <View>
                <StatusBar hidden={true}/>
                <View style={style.body}>
                    <View style={style.typeBox}>
                        <TouchableWithoutFeedback onPress={() => this._showSearchModal()}>
                            <Text style={[style.typeItem, style.typeItemActive]}>
                                退货
                            </Text>
                        </TouchableWithoutFeedback>

                        <TouchableWithoutFeedback onPress={() => this._showLeftSkuModal()}>
                            <Text style={style.typeItem}>
                                换货
                            </Text>
                        </TouchableWithoutFeedback>

                    </View>
                    <ScrollView style={style.returnGoodsBox}>
                        <View style={style.returnWarp}>
                            <Text style={{flex: 2, color: '#909090'}}>
                                申请售后商品
                            </Text>
                            <Text style={{flex: 1, color: '#909090'}}>
                                金额
                            </Text>
                            <Text style={{flex: 1, color: '#909090'}}>
                                数量
                            </Text>
                        </View>
                        <View style={style.returnWarp}>
                            <Text style={{flex: 2}}>
                                女款儿童中长款棉衣；M，红色
                            </Text>
                            <Text style={{flex: 1,fontSize: 18, color: mainBackgroundColor}}>
                                ￥66.66
                            </Text>
                            <View style={{flex: 1}}>
                                <View>
                                    <View style={style.returnSkuNumInputBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={style.returnSkuNumAction}>
                                                一
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <Text style={style.skuInput}>
                                            99
                                        </Text>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.returnSkuNumAction]}>
                                                +
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={style.returnWarp}>
                            <Text style={{flex: 2, color: '#909090'}}>
                                换货商品
                            </Text>
                            <Text style={{flex: 1, color: '#909090'}}>
                                金额
                            </Text>
                            <Text style={{flex: 1, color: '#909090'}}>
                                数量
                            </Text>
                        </View>

                        <View style={style.returnWarp}>
                            <View style={style.returnGoods}>
                                <Image source={{uri: 'https://uto-admin-cdn.ibrand.cc/storage/images/20190114/sGOG9OhrK3.jpg'}} style={style.returnGoodsImg}></Image>
                                <View style={style.returnGoodsName}>
                                    <Text>
                                        女款儿童中长款棉衣
                                    </Text>
                                    <Text style={{marginTop: 5}}>
                                        红色，m
                                    </Text>
                                    <View style={style.returnGoodsBtnBox}>
                                        <TouchableOpacity>
                                            <Text style={[style.btnItem, style.editBtn]}>
                                                编辑
                                            </Text>
                                        </TouchableOpacity>

                                        <TouchableOpacity>
                                            <Text style={[style.btnItem]}>
                                                删除
                                            </Text>
                                        </TouchableOpacity>

                                    </View>
                                </View>
                            </View>
                            <Text style={{flex: 1,fontSize: 18, color: mainBackgroundColor}}>
                                ￥66.66
                            </Text>
                            <View style={{flex: 1}}>
                                <View>
                                    <View style={style.returnSkuNumInputBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={style.returnSkuNumAction}>
                                                一
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <Text style={style.skuInput}>
                                            99
                                        </Text>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.returnSkuNumAction]}>
                                                +
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={style.returnWarp}>
                            <View style={style.returnGoods}>
                                <Image source={{uri: 'https://uto-admin-cdn.ibrand.cc/storage/images/20190114/sGOG9OhrK3.jpg'}} style={style.returnGoodsImg}></Image>
                                <View style={style.returnGoodsName}>
                                    <Text>
                                        女款儿童中长款棉衣
                                    </Text>
                                    <Text style={{marginTop: 5}}>
                                        红色，m
                                    </Text>
                                    <View style={style.returnGoodsBtnBox}>
                                        <TouchableOpacity>
                                            <Text style={[style.btnItem, style.editBtn]}>
                                                编辑
                                            </Text>
                                        </TouchableOpacity>

                                        <TouchableOpacity>
                                            <Text style={[style.btnItem]}>
                                                删除
                                            </Text>
                                        </TouchableOpacity>

                                    </View>
                                </View>
                            </View>
                            <Text style={{flex: 1,fontSize: 18, color: mainBackgroundColor}}>
                                ￥66.66
                            </Text>
                            <View style={{flex: 1}}>
                                <View>
                                    <View style={style.returnSkuNumInputBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={style.returnSkuNumAction}>
                                                一
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <Text style={style.skuInput}>
                                            99
                                        </Text>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.returnSkuNumAction]}>
                                                +
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={style.returnWarp}>
                            <View style={style.returnGoods}>
                                <Image source={{uri: 'https://uto-admin-cdn.ibrand.cc/storage/images/20190114/sGOG9OhrK3.jpg'}} style={style.returnGoodsImg}></Image>
                                <View style={style.returnGoodsName}>
                                    <Text>
                                        女款儿童中长款棉衣
                                    </Text>
                                    <Text style={{marginTop: 5}}>
                                        红色，m
                                    </Text>
                                    <View style={style.returnGoodsBtnBox}>
                                        <TouchableOpacity>
                                            <Text style={[style.btnItem, style.editBtn]}>
                                                编辑
                                            </Text>
                                        </TouchableOpacity>

                                        <TouchableOpacity>
                                            <Text style={[style.btnItem]}>
                                                删除
                                            </Text>
                                        </TouchableOpacity>

                                    </View>
                                </View>
                            </View>
                            <Text style={{flex: 1,fontSize: 18, color: mainBackgroundColor}}>
                                ￥66.66
                            </Text>
                            <View style={{flex: 1}}>
                                <View>
                                    <View style={style.returnSkuNumInputBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={style.returnSkuNumAction}>
                                                一
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <Text style={style.skuInput}>
                                            99
                                        </Text>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.returnSkuNumAction]}>
                                                +
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={style.addReturnGoods}>
                            <TouchableOpacity style={style.addGoodsBtn}>
                                <Text style={style.addGoodsBtnText}>
                                    添加商品
                                </Text>
                            </TouchableOpacity>
                        </View>
                        <View style={style.returnReason}>
                            <Text style={style.returnReasonText}>
                                问题描述
                            </Text>
                            <View>
                                <RadioGroup style={style.returnReasonItemsBox} color={mainBackgroundColor}>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                    <RadioButton style={style.returnReasonItems}>
                                        <Text>
                                            无理由退货
                                        </Text>
                                    </RadioButton>
                                </RadioGroup>
                            </View>
                        </View>
                    </ScrollView>
                    <View style={style.returnGoodsBottom}>
                       <View style={style.returnGoodsBottomLeft}>
                           <Text style={style.leftText}>
                               换货数量：3
                           </Text>
                           <Text style={style.leftText}>
                               订单差价：￥999
                           </Text>
                       </View>
                        <View style={style.returnGoodsBottomRight}>
                            <TouchableOpacity>
                                <Text style={style.rightText}>
                                    取消
                                </Text>
                            </TouchableOpacity>

                            <TouchableOpacity>
                                <Text style={[style.rightText, style.submitBtn]}>
                                    确定 ￥999
                                </Text>
                            </TouchableOpacity>

                        </View>
                    </View>
                </View>

                {/*搜索结果弹窗*/}
                <View>
                    <Modal
                        ref={"searchModal"}
                        position="center"
                        style={{backgroundColor:'transparent', width: 900}}
                        coverScreen={true}
                        // backdropPressToClose={false}
                        swipeToClose={false}
                    >
                        <View style={style.searchModalBox}>
                            <View style={style.searchTitle}>
                                <Text>
                                    搜索结果
                                </Text>
                                <View style={[style.closeIcon, {right: 0, top: 0}]}>
                                    <TouchableWithoutFeedback>
                                        <CXIcon name='guanbi' color='#909090' size={30}>

                                        </CXIcon>
                                    </TouchableWithoutFeedback>
                                </View>
                            </View>
                            <View style={style.searchInputBox}>
                                <View style={{flex: 1}}>
                                    <TextInput style={style.searchInput}></TextInput>
                                </View>
                                <View style={style.searchBtn}>
                                    <Text style={style.textWhite}>
                                        搜索
                                    </Text>
                                </View>
                            </View>
                            <View style={style.searchGoods}>

                                <ScrollView style={style.searchScrollView}>
                                    <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={style.goodsItemBox}>
                                            <View style={style.goodsItem}>
                                                <Text style={style.goodsNo}>
                                                    3131312
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    女款儿童中长款棉衣2019时尚感
                                                </Text>
                                                <Text style={style.goodsNames}>
                                                    M，红色
                                                </Text>
                                                <View style={style.goodsNum}>
                                                    <Text style={{color: mainBackgroundColor, flex: 1}}>
                                                        ￥444
                                                    </Text>
                                                    <Text>
                                                        库存： 55
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                </ScrollView>
                            </View>
                        </View>
                    </Modal>
                </View>

                {/*左侧SKU弹出*/}
                <View>
                    <Modal
                        ref={"leftSkuModal"}
                        position="top"
                        style={{backgroundColor:'transparent', position: 'relative'}}
                        coverScreen={true}
                        // backdropPressToClose={false}
                        swipeToClose={false}
                    >
                        <View style={style.leftModalBox}>
                            <View style={style.imgBox}>
                                <Image style={style.goodsImg} source={{uri: 'http://pic30.nipic.com/20130613/12074212_110133058344_2.jpg'}}></Image>
                                <View style={style.goodsName}>
                                    <View>
                                        <Text style={style.goodsText}>
                                            178254244；
                                        </Text>
                                        <Text style={style.goodsText}>
                                            女款儿童中长款棉衣；
                                        </Text>
                                    </View>

                                    <Text style={style.goodsMoney}>
                                        ￥ 4242.00
                                    </Text>
                                </View>
                                <View style={style.closeIcon}>
                                    <TouchableWithoutFeedback>
                                        <CXIcon name='guanbi' color='#909090' size={30}>

                                        </CXIcon>
                                    </TouchableWithoutFeedback>
                                </View>

                            </View>
                            <View style={style.skuBox}>
                                <View style={style.specLine}>
                                    <View>
                                        <Text style={style.specTitle}>
                                            尺码：
                                        </Text>
                                    </View>
                                    <View style={style.specValueBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.specValue, style.specValueActive]}>
                                                S
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.specValue, style.specValueActive]}>
                                                M
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.specValue, style.specValueDisable]}>
                                                L
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                                <View style={style.specLine}>
                                    <View>
                                        <Text style={style.specTitle}>
                                            颜色：
                                        </Text>
                                    </View>
                                    <View style={style.specValueBox}>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.specValue, style.specValueActive]}>
                                                红色
                                            </Text>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback>
                                            <Text style={[style.specValue, style.specValueActive]}>
                                                红色
                                            </Text>
                                        </TouchableWithoutFeedback>
                                    </View>
                                </View>
                            </View>
                            <View style={style.skuNumBox}>
                                <View style={style.skuNumInputBox}>
                                    <TouchableWithoutFeedback>
                                        <Text style={style.skuNumAction}>
                                            一
                                        </Text>
                                    </TouchableWithoutFeedback>
                                    <Text style={{width: 70, height: 50, lineHeight: 50, textAlign: 'center', backgroundColor: white}}>
                                        99
                                    </Text>
                                    <TouchableWithoutFeedback>
                                        <Text style={[style.skuNumAction]}>
                                            +
                                        </Text>
                                    </TouchableWithoutFeedback>
                                </View>
                                <Text style={{color: white, marginLeft: 35, flex: 1}}>
                                    库存: 99件
                                </Text>
                                <TouchableWithoutFeedback>
                                    <View style={style.skuChangeBox}>
                                        <Text style={{marginRight: 25, color: white}}>
                                            修改
                                        </Text>
                                        <Text style={{color: white}}>
                                            ￥9999
                                        </Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>

                    </Modal>
                </View>
            </View>
        )
    }
}

const style = StyleSheet.create({
    typeBox: {
        flexDirection: 'row',
        paddingVertical: 20,
        paddingHorizontal: 30
    },
    typeItem: {
        width: 150,
        textAlign: 'center',
        lineHeight: 44,
        borderWidth: 1,
        borderColor: mainBackgroundColor,
        marginRight: 40,
        borderRadius: 4,
        color: mainBackgroundColor
    },
    typeItemActive: {
        backgroundColor: mainBackgroundColor,
        color: white
    },
    returnGoodsBox: {
        backgroundColor: white,
        paddingHorizontal: 30,
        height: 489,
    },
    returnWarp: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: '#F0F0F5',
        paddingVertical: 15
    },
    returnSkuNumInputBox: {
        width: 105,
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        height: 25,
        borderColor: '#D7D7D7'
    },
    skuInput: {
        width: 50,
        height: 25,
        lineHeight: 25,
        textAlign: 'center',
        borderColor: '#D7D7D7',
        borderLeftWidth: 1,
        borderRightWidth: 1
    },
    returnSkuNumAction: {
        textAlign: 'center',
        fontSize: 20,
        width: 25,
        lineHeight: 25,
        height: 25,
        color: '#4A4A4A'
    },
    returnGoodsImg: {
        width: 100,
        height: 100,
        borderWidth: 1,
        borderColor: '#D7D7D7',
        borderRadius: 4
    },
    returnGoods: {
        flex: 2,
        flexDirection: 'row'
    },
    returnGoodsName: {
        marginLeft: 20
    },
    returnGoodsBtnBox: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    btnItem: {
        width: 80,
        height: 35,
        lineHeight: 35,
        textAlign: 'center',
        borderRadius: 4,
        marginRight: 20,
        backgroundColor: '#D7D7D7',
        color: '#4A4A4A',
        marginTop: 20
    },
    editBtn: {
        backgroundColor: mainBackgroundColor,
        color: white
    },
    addReturnGoods: {
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderColor: '#D7D7D7',
    },
    addGoodsBtn: {
        width: 100,
        marginLeft: 1

    },
    addGoodsBtnText: {
        textAlign: 'center',
        lineHeight: 44,
        color: mainBackgroundColor,
        borderWidth: 1,
        borderColor: mainBackgroundColor,
        borderRadius: 4,
    },
    returnReason: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#D7D7D7',
        paddingVertical: 15,
        marginBottom: 100
    },
    returnReasonText: {
        color: '#909090',
        paddingTop: 10,
        marginRight: 40
    },
    returnReasonItemsBox: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    returnReasonItems: {
        marginRight: 60,
        marginBottom: 10
    },
    returnGoodsBottom: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 90,
        paddingHorizontal: 30,
        backgroundColor: '#202020'
    },
    returnGoodsBottomLeft: {
        flexDirection: 'row',
        flex: 1
    },
    leftText: {
        color: white,
        marginRight: 60
    },
    returnGoodsBottomRight: {
        flexDirection: 'row',
    },
    rightText: {
        borderRadius: 4,
        height: 50,
        lineHeight: 50,
        paddingHorizontal: 40,
        color: white,
        backgroundColor: '#909090',
        marginLeft: 30
    },
    submitBtn: {
        backgroundColor: mainBackgroundColor
    },



    // 搜索弹窗部分
    searchModalBox: {
        position: 'absolute',
        top: 0,
        width: 900,
        flex: 1,
        // alignItems: 'center',
        backgroundColor: white,
        borderRadius: 4,
        marginTop: 80
    },
    searchTitle: {
        height: 60,
        justifyContent: 'center',
        paddingLeft: 30,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8'
    },
    searchInputBox: {
        paddingHorizontal: 30,
        paddingVertical: 20,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8'
    },
    searchBtn: {
        width: 120,
        height: 45,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: mainBackgroundColor,
    },
    searchInput: {
        paddingLeft: 15,
        height: 45,
        backgroundColor: '#F3F3F3'
    },
    searchGoods: {
        paddingVertical: 30,
        paddingHorizontal: 10
    },
    searchScrollView: {
        height: 280,
    },
    textWhite: {
      color: white
    },
    goodsItemBox: {
        width: '33%',
        marginBottom: 20,
        paddingHorizontal: 10
    },
    goodsItem: {
        padding: 10,
        backgroundColor: '#F3F3F3',
        borderWidth: 1,
        borderColor: '#D7D7D7',
        borderRadius: 4
    },
    goodsNo: {
        fontSize: 16,
        color: '#4A4A4A',
        fontWeight: 'bold'
    },
    goodsNames: {
        fontSize: 12,
        color: '#4A4A4A',
        marginTop: 5
    },
    goodsNum: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 5
    },

    // sku弹窗部分
    leftModalBox: {
        width: 875,
        position: 'absolute',
        paddingLeft: 30,
        paddingTop: 30,
        paddingRight: 30,
        top: 0,
        right: 0,
        bottom: 0,
        backgroundColor: white
    },
    imgBox: {
        flexDirection: 'row',
    },
    goodsImg: {
        width: 200,
        height: 200,
        marginRight: 50
    },
    goodsName: {
        justifyContent: 'space-between'
    },
    goodsText: {
        fontSize: 24,
        color: '#202020'
    },
    goodsMoney: {
        fontSize: 28,
        color: mainBackgroundColor
    },
    skuBox: {
        backgroundColor: '#F3F3F3',
        paddingTop: 20,
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 20
    },
    specLine: {
        marginBottom: 10,
    },
    specTitle: {
        color: '#909090',
        marginBottom: 20
    },
    specValueBox: {
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap'
    },
    specValue: {
        paddingTop: 12,
        paddingBottom: 12,
        paddingLeft: 30,
        paddingRight: 30,
        backgroundColor: white,
        borderRadius: 4,
        // borderWidth: 1,
        // borderColor: '#D7D7D7',
        color: '#4A4A4A',
        marginRight: 20,
        marginBottom: 10
    },
    specValueDisable: {
        backgroundColor: '#E8E7E7',
        color: '#9F9F9F'
    },
    specValueActive: {
        backgroundColor: mainBackgroundColor,
        // borderWidth: 1,
        // borderColor: mainBackgroundColor,
        color: white,
    },
    skuNumBox: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 30,
        paddingRight: 30,
        height: 90,
        backgroundColor: '#202020',
    },
    skuNumInputBox: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        height: 50,
        borderColor: '#D7D7D7'
    },
    skuNumAction: {
        textAlign: 'center',
        fontSize: 20,
        width: 50,
        lineHeight: 50,
        height: 50,
        backgroundColor: '#D7D7D7',
        color: '#4A4A4A'
    },
    skuChangeBox: {
        flexDirection: 'row',
        alignItems: 'center',
        color: white,
        backgroundColor: mainBackgroundColor,
        borderRadius: 4,
        height: 50,
        paddingLeft: 20,
        paddingRight: 20
    },
    closeIcon: {
        position: 'absolute',
        right: -30,
        top: -30,

    },
});

export default returnPage;